<script setup lang="ts">
import { getMedicalOrderLogistics } from '@/apis/medicalorder';
import router from '@/router';
import type { Location, Logistics } from '@/types/oreder';
import { onMounted, ref, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import AMapLoader from '@amap/amap-jsapi-loader';
import endImg from '@/assets/end.png'
import startImg from '@/assets/start.png'
import carImage from '@/assets/car.png'

const route = useRoute()
const medicalOrderLogistics = ref<Logistics>()
onMounted(async () => {
  const res = await getMedicalOrderLogistics(route.params.id as string)
  medicalOrderLogistics.value = res.data
  window._AMapSecurityConfig = {
    securityJsCode: "60cbd583d3ec6b40916311bad92d4093",
  };
  // const res = await getMedicalOrderLogistics()
  AMapLoader.load({
    key: "d0131bc239c383f22e4041d5d62ce010", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      //创建AMap.Map实例
      let map = new AMap.Map("map", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
      });
      //自动规划路径
      AMap.plugin('AMap.Driving', function () {
        const driving = new AMap.Driving({
          map,
          showTraffic: false,
          hideMarkers: true//途径点和起始点图标消失
        })
        // // 起点坐标
        // const start = res.data.logisticsInfo.shift()
        // const startMarker = new AMap.Marker({
        //   position: [start?.longitude, start?.latitude],
        //   icon: startImg
        // })
        // map.add(startMarker)
        // // 终点坐标
        // const end = res.data.logisticsInfo.pop()
        // const endMarker = new AMap.Marker({
        //   position: [end?.longitude, end?.latitude],
        //   icon: endImg
        // })
        // map.add(endMarker)


        if (medicalOrderLogistics.value?.logisticsInfo) {
          const list = [...medicalOrderLogistics.value.logisticsInfo]
          /**
           * 
           * @param point 标记位置
           * @param image 标记的图片地址
           * @param width 图片的宽度
           * @param height 图片的高度
           * @param returns 
           */
          const createMarker = (
            image: string,
            point?: Location,
            height: number = 34,
            width: number = 25,
          ) => {
            //创建 AMap.Icon 实例：
            const icon = new AMap.Icon({
              size: new AMap.Size(width, height), //图标尺寸
              image, //Icon 的图像
              // imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new AMap.Size(width, height), //根据所设置的大小拉伸或压缩图片
            });
            // 将 Icon 实例添加到 marker 上:
            const marker = new AMap.Marker({
              position: new AMap.LngLat(point?.longitude, point?.latitude), //点标记的位置
              offset: new AMap.Pixel(-width / 2, -height / 2), //偏移量
              icon: icon, //添加 Icon 实例
              // title: "北京",
              // zooms: [2, 12], //点标记显示的层级范围，超过范围不显示
            });
            return marker
          }
          // 起点坐标
          const start = list.shift()
          const startMarker = createMarker(startImg, start)
          map.add(startMarker)
          //终点坐标
          const end = list.pop()
          const endMarker = createMarker(endImg, end)
          map.add(endMarker)
          // 途经点
          const opts = {
            waypoints: list.map((item) => [item.longitude, item.latitude]) //途经点参数，最多支持传入16个途经点
          }
          driving.search(
            [start?.longitude, start?.latitude],
            [end?.longitude, end?.latitude],
            opts,
            () => {
              // 未出错时，result即是对应的路线规划方案
              //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
              //查询成功时，result 即为对应的驾车导航信息
              const currentLocation = medicalOrderLogistics.value?.currentLocationInfo
              const currentMarker = createMarker(carImage, currentLocation)
              map.add(currentMarker)
              // 3秒后将当前运输的位置定位到中间同时需要进行一定的缩放
              setTimeout(() => {
                map.setFitView([currentMarker]), map.setZoom(12)
              }, 3000)
            }
          )
        }

      })

    })
    .catch((e: any) => {
      console.log(e);
    });
});

onUnmounted(() => {
  // map?.destroy();
});



</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="router.back()" />
        <span>{{ medicalOrderLogistics?.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">订单{{ medicalOrderLogistics?.statusValue }} 预计{{ medicalOrderLogistics?.estimatedTime }}送达</p>
        <p class="predict">
          <span>{{ medicalOrderLogistics?.name }}</span>
          <span>{{ medicalOrderLogistics?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in medicalOrderLogistics?.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">您的订单正在{{ item.statusValue }}{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}

#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;

  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;

    >span {
      flex: 1;
      text-align: center;
    }

    .van-icon {
      font-size: 18px;
      color: #666;

      &:last-child {
        color: var(--cp-primary);
      }
    }
  }

  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;

    .status {
      font-size: 15px;
      line-height: 26px;
    }

    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;

      >span {
        padding-right: 10px;
      }
    }
  }
}

.logistics {
  padding: 0 10px 20px;

  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }

  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }

    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }

    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }

    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>